<template>
  <div>
    <van-nav-bar fixed title="收银二维码" left-arrow @click-left="$utils.back($route.path);" />
    <div class="has-top">
      <div v-if="!replaceImg" ref="addImg">
        <div class="mt-40 mlr-30 br-16 bg-primary pd-15 pos-r">
          <div class="br-10 plr-36 bg-white">
            <div ref="svgBox" class="hb fs-28 ptb-25">
              <!-- <svg-icon icon-class="store" class="color-primary mr-15" /> -->
              <div class="storeIcon-box"> <img :src="storeIcon"></div>
              <!-- <svg ref="svg" class="svg-icon color-primary mr-15" aria-hidden="true">
                <use xlink:href="#icon-store" />
              </svg> -->
              <span>{{ storeName }}</span>
            </div>
            <img-box class="is-350" style="margin:1.066667rem auto 0" :img-url="img" long-touch is-cashcode @saveImg="saveImg" @shareImg="shareImg" />
            <p class="tac fs-28 pb-110">扫一扫 向我付款</p>
          </div>
          <div class="logo-box"> <img :src="logo"></div>
          <div class="bg-box"> <img :src="bg"></div>

        </div>
      </div>
      <div v-if="replaceImg" class="mt-40"><img :src="replaceImg" alt="" srcset=""></div>

    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import imgBox from 'components/imgBox'
import { GetCashQrCodeUrl } from 'api/store'
export default {
  components: { imgBox },
  data() {
    return {
      img: '',
      storeIcon: require('assets/images/storeIcon.png'),
      logo: require('assets/images/wechatLogo.png'),
      bg: require('assets/images/cashCodeBG.png'),
      storeName: '',
      addImgUrl: '',
      replaceImg: ''
    }
  },
  created() {
    setTimeout(() => {
      // this.$refs.svgBox.childNodes[0].childNodes[0].shadowRoot.mode = 'open'
      // console.log(this.$refs.svgBox.childNodes[0].childNodes[0])
    }, 3000)
    this.GetCashQrCodeUrl()
  },
  methods: {
    GetCashQrCodeUrl() {
      const _this = this
      GetCashQrCodeUrl().then(res => {
        console.log(res)
        _this.img = res.Data.QrcodeUrl
        _this.storeName = res.Data.StoreName
        if (_this.$utils.wechat().isWechat) {
          _this.replaceToImg()
        }
      })
    },

    replaceToImg() {
      setTimeout(() => {
        html2canvas(this.$refs.addImg, {
          backgroundColor: null,
          allowTaint: false,
          useCORS: true // 图片跨域
        }).then((canvas) => {
          const url = canvas.toDataURL('image/png')
          this.replaceImg = url
        })
      }, 500)
    },
    addImg(fn) {
      setTimeout(() => {
        html2canvas(this.$refs.addImg, {
          backgroundColor: null,
          allowTaint: false,
          useCORS: true // 图片跨域
        }).then((canvas) => {
          const url = canvas.toDataURL('image/png')
          this.addImgUrl = url
          if (fn) {
            fn()
          }
        })
      }, 500)
    },
    saveImg() {
      const _this = this
      this.addImg(function() {
        _this.$utils.downFile(_this.addImgUrl, '')
      })
    },
    shareImg(platform) {
      const _this = this
      this.addImg(function() {
        _this.$utils.ShareImgByPlatfrom(platform, _this.addImgUrl, '')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .storeIcon-box{
    display: inline-block;
    height: 32px;
    width: 35px;
    margin-right: 16px;
  }
  .logo-box{
    width: 235px;
    height: 54px;
    margin: 40px auto 32px;
  }
  .bg-box{
    position: absolute;
    width:100%;
    bottom: 0;
    left: 0;
  }
</style>
